
<!--文章集合盒子-->


<template>

    <div class="article-box">
        <div style="color: white;width: 100%;">当前分类:
            <span style="color:orange;font-size: 20px" v-text="tabName!==''?tabName:'无'">

            </span>

<!--            排序方式-->
            <span class="art-sort-box">
                <span v-for="i in sort.list"
                      :style="{color:i.id===sort.id?'tomato':''}"
                      @click="clickSort(i.id,i.sort)"
                >
                  {{i.content}} {{i.desc?'↑':'↓'}}
                </span>
            </span>
        </div>

        <div v-show="list<1" style="font-size: 30px;margin-top: 50px;color: white">
            🥰暂无内容<br><br>先看看其他的吧
        </div>




<!--        内容盒子-->
        <div class="card-item-box">
            <ArticleItem v-for="item in articles.list"
                         :item="item"
                         style="margin-bottom: 100px;color: black"></ArticleItem>
        </div>

  </div>


</template>

<script>
    import {onMounted} from "@vue/runtime-core";
    import axios from 'axios'
    import {reactive, ref} from "@vue/reactivity";
    import ArticleItem from "@/components/article/ArticleItem";
    export default {
        name: "ArticleCard",
        components: {ArticleItem},
        props:{
          list:{
            type:Array,
             default:[]
          },
           tabName:{
              type:String,
               default:""
           },
           pageNum:{
               type:Number,
               // 默认查找第一页
               default: 1
           }
        },setup(props){

            let articles=reactive({
                // 如果传入的是列表则直接渲染，否则启动请求
                list:[]

            })
            let sort=reactive({
                id:0,

                list:[
                    {
                        id:1,
                        content:"时间",
                        desc:true,
                        sort:function (desc) {
                            const lst=props.list
                            if(desc){
                                articles.list=lst.sort((p,n)=>{
                                    return new Date(p.aCreateTime).getTime()- new Date(n.aCreateTime).getTime()
                                })
                            }else{
                                articles.list=lst.sort((p,n)=>{
                                    return new Date(n.aCreateTime).getTime()-new Date(p.aCreateTime).getTime()
                                })

                            }


                        }

                    },
                    {
                        id:2,
                        content:"浏览",
                        desc:true,
                        sort:function (desc) {
                            const lst=props.list
                            if(desc){
                                articles.list=lst.sort((p,n)=>{
                                    return n.view-p.view
                                })
                            }else{
                                articles.list=lst.sort((p,n)=>{
                                    return p.view-n.view
                                })
                            }


                        }

                    },
                    {
                        id:3,
                        content:"置顶",
                        desc:true,
                        sort:function (desc) {
                            const lst=[]
                            if(desc){

                                props.list.forEach((v)=>{
                                   if(v.aTop===0){
                                       lst.push(v)
                                   }
                                })


                            }else{
                                props.list.forEach((v)=>{
                                    if(v.aTop===1){
                                        lst.push(v)
                                    }
                                })
                            }
                            articles.list=lst
                        }

                    }

                ]

            })


            let load=()=>{

            }
            function clickSort(sortId,callback){
                const desc=sort.list[sortId-1].desc
                // 被选中的排序方式
                sort.id=sortId
                // 修改排序的顺序 正序/倒序
                sort.list[sortId-1].desc=!desc
                // 执行排序方法
                callback(!desc)
            }


            function getArticles(){
                articles.list=props.list

            }

            let addview=(id)=>{
                axios.get("/api/article/view?id="+id)
            }

            onMounted(async ()=>{
               await getArticles()

            })
            return {
                load,
                articles,
                sort,
                clickSort,
                addview
            }
        },
        watch:{
            list(newV){
                this.articles.list=newV

            }
        }
    }
</script>

<style scoped lang="less">

  .article-box{
    width: 100%;
    height:100%;
    max-width:1000px;
    display: flex;
    flex-direction: column;
    align-items: center;


    margin: 0;
    padding: 0;


      /*文章盒子上方功能区*/
    .art-sort-box{
        display: inline-block;
        width: 400px;
        min-width: 200px;

        float: right;
        span{
            margin: 20px;
            cursor:pointer;
            transition: all 0.3s;
        }
        span:hover{
            color: tomato;
        }
    }


      /*文章卡片盒子*/
      .card-item-box{
          width: 100%;
          height: 100%;

          margin-top:50px;
          margin-bottom: 100px;

          /*!*文章卡片个体*!*/
          /*.card-item{*/
          /*    width: 90%;*/
          /*    max-width: 850px;*/
          /*    min-height: 230px;*/
          /*    color: white;*/
          /*    margin:50px 0 50px 0;*/
          /*    background-color: #404E68;*/
          /*    border: none;*/

          /*    .title-link{*/
          /*        text-decoration: none;*/
          /*        color: white;*/
          /*        .title{*/
          /*            float: left;*/
          /*            font-size: 20px;*/
          /*            line-height: 20px;*/
          /*            padding-left: 20px;*/
          /*            transition: all 0.5s;*/
          /*        }*/
          /*        .title:hover{*/
          /*            color: orange;*/
          /*        }*/
          /*    }*/
          /*    .art-image-box{*/
          /*        width: 100%;*/
          /*        height:200px;*/
          /*        overflow: hidden;*/
          /*        margin-top: 25px;*/
          /*        border-radius: 5px;*/
          /*        .art-image{*/

          /*            width: 100%;*/
          /*            height: 100%;*/
          /*            object-fit: cover;*/
          /*        }*/
          /*        .art-image:hover{*/
          /*            transform:scale(1.2);*/
          /*            transition: all 0.5s;*/
          /*            cursor: pointer;*/


          /*        }*/
          /*    }*/


          /*    !*卡片内容*!*/
          /*    .card-content{*/
          /*        height: 100px;*/
          /*        margin-top: 30px;*/
          /*        text-align: left;*/
          /*        max-height: 100px;*/
          /*        overflow-y: hidden;*/
          /*        padding-left: 20px;*/
          /*    }*/

          /*    .card-footer{*/
          /*        min-height: 50px;*/
          /*    }*/
          /*}*/
          .card-item:hover{


              /*box-shadow: #1DA577 0px 22px 70px 4px;*/
              box-shadow: #1D7EA1 0px 5px 15px;


          }



      }


  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  .clearfix:after {
      clear: both
  }


  ::-webkit-scrollbar {/*滚动条整体样式*/
      width: 0;     /*高宽分别对应横竖滚动条的尺寸*/
  }
  ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      /*background: white;*/
      background-color: #242b39;
  }


</style>
<!--            &lt;!&ndash;        正文开始&ndash;&gt;-->
<!--            <el-card class="card-item"-->
<!--                     v-for="(item,index) in articles.list"-->

<!--            >-->


<!--                &lt;!&ndash;     -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; 标题-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;-->
<!--                <div slot="header" class="clearfix">-->
<!--                    <router-link :to="-->
<!--          {-->
<!--           name:'article',-->
<!--            query:{-->
<!--               aId:item.aId-->
<!--            }-->
<!--          }-->
<!--        " class="title-link">-->
<!--                        <span v-text="item.aTitle" class="title" @click="addview(item.aId)" ></span>-->
<!--                    </router-link>-->


<!--                    <div style="float: right;margin-right: 20px;color: tomato" class="flex-center" >-->
<!--                        <img :src="item.tab.tImage"-->
<!--                             alt="找不到"-->
<!--                             style="width: 35px;height:35px;border-radius: 50%;margin-right: 10px"-->
<!--                             v-show="item.tab.tImage!==null &&item.tab.tImage!==''">-->
<!--                        {{item.tab.tName}}-->
<!--                    </div>-->
<!--                    <div style="float: right;margin-right: 20px" v-show="item.aTop===1">🌈置顶 </div>-->
<!--                </div>-->


<!--                &lt;!&ndash;  &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;        内容              &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;-->
<!--                <div class="art-image-box flex-center" v-show="item.aImage!==null && item.aImage!==''">-->

<!--                    <img :src="item.aImage"   alt="暂无图片"  class="art-image"/>-->
<!--                </div>-->
<!--                <div  class="card-content" v-html="item.aContent.substring(0,600)">-->


<!--                </div>-->
<!--                &lt;!&ndash;          底部&ndash;&gt;-->
<!--                <div class="flex-center card-footer">-->
<!--                    <div style="flex:1 ">-->
<!--                        <i class="el-icon-view"></i>-->
<!--                        浏览量:<strong style="font-size: 20px">{{item.view}}</strong></div>-->
<!--                    <div style="flex: 1">-->
<!--                        <i class="el-icon-pie-chart"></i>-->
<!--                        发表时间:-->
<!--                        <strong style="font-size: 20px">{{item.aCreateTime}}</strong>-->
<!--                    </div>-->
<!--                </div>-->


<!--            </el-card>-->